import { statisticsModel } from '@/models/StatisticsModel'
import { ProCard } from '@ant-design/pro-components'
import { Table } from 'antd'
import { ColumnsType } from 'antd/es/table'
import { observer } from 'mobx-react-lite'

export interface SellerTableDataType {
  key: string
  name: string
  field1: number // 录入数量
  V: number // 加V数量
  VF: number // 加V不成功数量
  VP: number // 加V成功率
  W: number // 没说话数量
  WP: number // 开口率
  C: number // 报价不回
  CP: number // 报价不回率
  CC: number // 已推
  CCP: number // 已推率
  D: number // 成交
  DP: number // 成交率
  VDP: number // 加V成交率
  S: number // 被删除
  SP: number // 删除率
  X: number // 无效
  XP: number // 无效率
  F: number // 重复
  FP: number // 重复率
  Q: number // 去别家了
  QP: number // 流失别家率
  ADP: number // 毛客资成交率
  children?: SellerTableDataType[]
}

const renderPre = (value?: number) => {
  return `${value}%`
}
const columns: ColumnsType<SellerTableDataType> = [
  { width: 150, align: 'center', title: '跟进状态统计', dataIndex: 'name' },
  { width: 100, align: 'center', title: '录入数量', dataIndex: 'field1', sorter: (a, b) => a.field1 - b.field1 },
  { width: 100, align: 'center', title: '加V数量', dataIndex: 'V', sorter: (a, b) => a.V - b.V },
  {
    width: 100,
    align: 'center',
    title: '加V成功率',
    dataIndex: 'VP',
    sorter: (a, b) => a.VP - b.VP,
    render: (dom, record) => renderPre(record.VP),
  },
  { width: 100, align: 'center', title: '没说话量', dataIndex: 'W', sorter: (a, b) => a.W - b.W },
  {
    width: 100,
    align: 'center',
    title: '开口率',
    dataIndex: 'WP',
    sorter: (a, b) => a.WP - b.WP,
    render: (dom, record) => renderPre(record.WP),
  },
  { width: 100, align: 'center', title: '报价不回', dataIndex: 'C', sorter: (a, b) => a.C - b.C },
  {
    width: 120,
    align: 'center',
    title: '报价不回率',
    dataIndex: 'CP',
    sorter: (a, b) => a.CP - b.CP,
    render: (dom, record) => renderPre(record.CP),
  },
  { width: 100, align: 'center', title: '已推', dataIndex: 'CC', sorter: (a, b) => a.CC - b.CC },
  {
    width: 100,
    align: 'center',
    title: '已推率',
    dataIndex: 'CCP',
    sorter: (a, b) => a.CCP - b.CCP,
    render: (dom, record) => renderPre(record.CCP),
  },
  { width: 100, align: 'center', title: '成交', dataIndex: 'D', sorter: (a, b) => a.D - b.D },
  {
    width: 100,
    align: 'center',
    title: '成交率',
    dataIndex: 'DP',
    sorter: (a, b) => a.DP - b.DP,
    render: (dom, record) => renderPre(record.DP),
  },
  {
    width: 100,
    align: 'center',
    title: '加V成交率',
    dataIndex: 'VDP',
    sorter: (a, b) => a.VDP - b.VDP,
    render: (dom, record) => renderPre(record.VDP),
  },
  { width: 100, align: 'center', title: '被删除', dataIndex: 'S', sorter: (a, b) => a.S - b.S },
  {
    width: 100,
    align: 'center',
    title: '删除率',
    dataIndex: 'SP',
    sorter: (a, b) => a.SP - b.SP,
    render: (dom, record) => renderPre(record.SP),
  },
  { width: 100, align: 'center', title: '无效', dataIndex: 'X', sorter: (a, b) => a.X - b.X },
  {
    width: 100,
    align: 'center',
    title: '无效率',
    dataIndex: 'XP',
    sorter: (a, b) => a.XP - b.XP,
    render: (dom, record) => renderPre(record.XP),
  },
  { width: 100, align: 'center', title: '重复', dataIndex: 'F', sorter: (a, b) => a.F - b.F },
  {
    width: 100,
    align: 'center',
    title: '重复率',
    dataIndex: 'FP',
    sorter: (a, b) => a.FP - b.FP,
    render: (dom, record) => renderPre(record.FP),
  },
  { width: 100, align: 'center', title: '去别家了', dataIndex: 'Q', sorter: (a, b) => a.Q - b.Q },
  {
    width: 120,
    align: 'center',
    title: '流失别家率',
    dataIndex: 'QP',
    sorter: (a, b) => a.QP - b.QP,
    render: (dom, record) => renderPre(record.QP),
  },
  {
    width: 120,
    align: 'center',
    title: '毛客资成交率',
    dataIndex: 'ADP',
    sorter: (a, b) => a.ADP - b.ADP,
    render: (dom, record) => renderPre(record.ADP),
  },
]

import { PhotoTypeStatisticsBO } from '@/services/StatisticsService'
import ProCardDivider from '@ant-design/pro-card/es/components/Divider'
import './index.less'

export interface GoodsTableDataType {
  name: string
  child: number // 儿童
  childP: number
  idPhoto: number // 证件照
  idPhotoP: number
  hotchpotch: number // 全家福
  hotchpotchP: number
  parentChild: number // 亲子
  parentChildP: number
  couplePhoto: number // 情侣照
  couplePhotoP: number
  photograph: number // 写真
  photographP: number
  uncertain: number // 不确定
  uncertainP: number
  pregnantWoman: number // 孕妇
  pregnantWomanP: number
  children: GoodsTableDataType[]
}

const CellElm = ({ value, percentage }: { value: number; percentage?: number }) => (
  <div style={{ display: 'flex', gap: '20px', margin: '0 auto' }}>
    <span>{value}个</span>
    <span style={{ color: 'rgba(0,0,0,.4)' }}>{percentage}%</span>
  </div>
)
const goodsColumns: ColumnsType<PhotoTypeStatisticsBO> = [
  { align: 'center', width: 80, title: '品类统计', dataIndex: 'sellerName' },
  {
    align: 'center',
    width: 50,
    title: '孕妇',
    dataIndex: 'field1',
    render: (dom, record) => <CellElm value={record.field1} percentage={record.field1Percentage} />,
  },
  {
    align: 'center',
    width: 50,
    title: '儿童',
    dataIndex: 'field2',
    render: (dom, record) => <CellElm value={record.field2} percentage={record.field2Percentage} />,
  },
  {
    align: 'center',
    width: 50,
    title: '亲子',
    dataIndex: 'field3',
    render: (dom, record) => <CellElm value={record.field3} percentage={record.field3Percentage} />,
  },
  {
    align: 'center',
    width: 50,
    title: '全家福',
    dataIndex: 'field4',
    render: (dom, record) => <CellElm value={record.field4} percentage={record.field4Percentage} />,
  },
  {
    align: 'center',
    width: 50,
    title: '证件照',
    dataIndex: 'field5',
    render: (dom, record) => <CellElm value={record.field5} percentage={record.field5Percentage} />,
  },
  {
    align: 'center',
    width: 50,
    title: '情侣照',
    dataIndex: 'field6',
    render: (dom, record) => <CellElm value={record.field6} percentage={record.field6Percentage} />,
  },
  {
    align: 'center',
    width: 50,
    title: '写真',
    dataIndex: 'field7',
    render: (dom, record) => <CellElm value={record.field7} percentage={record.field7Percentage} />,
  },
  {
    align: 'center',
    width: 50,
    title: '不确定',
    dataIndex: 'field8',
    render: (dom, record) => <CellElm value={record.field8} percentage={record.field8Percentage} />,
  },
]

const SellerTable = () => {
  return (
    <>
      <ProCard>
        <Table<SellerTableDataType>
          bordered
          pagination={false}
          key={'name'}
          dataSource={statisticsModel.sellerTableDataType}
          columns={columns}
          size="small"
          expandable={{
            expandedRowClassName: () => 'expandRow',
          }}
          scroll={{ x: 'max-content', y: 500 }}
        />
        <ProCardDivider />
        <Table<PhotoTypeStatisticsBO>
          bordered
          pagination={false}
          key={'userId'}
          dataSource={statisticsModel.photoTypeDataBOList}
          columns={goodsColumns}
          size="small"
          expandable={{
            expandedRowClassName: () => 'expandRow',
          }}
          scroll={{ x: 'max-content', y: 500 }}
          summary={() => (
            <Table.Summary fixed>
              <Table.Summary.Row>
                <Table.Summary.Cell index={0} align="center">
                  {statisticsModel.photoTypeDataAllBO.sellerName}
                </Table.Summary.Cell>
                <Table.Summary.Cell index={1}>
                  <CellElm
                    value={statisticsModel.photoTypeDataAllBO.field1}
                    percentage={statisticsModel.photoTypeDataAllBO.field1Percentage}
                  />
                </Table.Summary.Cell>
                <Table.Summary.Cell index={2}>
                  <CellElm
                    value={statisticsModel.photoTypeDataAllBO.field2}
                    percentage={statisticsModel.photoTypeDataAllBO.field2Percentage}
                  />
                </Table.Summary.Cell>
                <Table.Summary.Cell index={3}>
                  <CellElm
                    value={statisticsModel.photoTypeDataAllBO.field3}
                    percentage={statisticsModel.photoTypeDataAllBO.field3Percentage}
                  />
                </Table.Summary.Cell>
                <Table.Summary.Cell index={4}>
                  <CellElm
                    value={statisticsModel.photoTypeDataAllBO.field4}
                    percentage={statisticsModel.photoTypeDataAllBO.field4Percentage}
                  />
                </Table.Summary.Cell>
                <Table.Summary.Cell index={5}>
                  <CellElm
                    value={statisticsModel.photoTypeDataAllBO.field5}
                    percentage={statisticsModel.photoTypeDataAllBO.field5Percentage}
                  />
                </Table.Summary.Cell>
                <Table.Summary.Cell index={6}>
                  <CellElm
                    value={statisticsModel.photoTypeDataAllBO.field6}
                    percentage={statisticsModel.photoTypeDataAllBO.field6Percentage}
                  />
                </Table.Summary.Cell>
                <Table.Summary.Cell index={7}>
                  <CellElm
                    value={statisticsModel.photoTypeDataAllBO.field7}
                    percentage={statisticsModel.photoTypeDataAllBO.field7Percentage}
                  />
                </Table.Summary.Cell>
                <Table.Summary.Cell index={8}>
                  <CellElm
                    value={statisticsModel.photoTypeDataAllBO.field8}
                    percentage={statisticsModel.photoTypeDataAllBO.field8Percentage}
                  />
                </Table.Summary.Cell>
              </Table.Summary.Row>
            </Table.Summary>
          )}
        />
      </ProCard>
    </>
  )
}

export default observer(SellerTable)
